<template>
  <div class="index_update_container">
    <el-form  ref="form" :rules="updateRule" :model="form" label-position="left">
        <div class="index_update_title_container">
          <h3>后台首页设置说明</h3>
        </div>
      <el-form-item prop="description">
        <editor  id="tinymce" v-model="form.description" :init="init"></editor>
      </el-form-item>
        <div  class="button-container" >
          <el-button type="primary" @click.prevent="update" :loading="loading" class="el-icon-edit">保存</el-button>
        </div>
    </el-form>
  </div>
</template>

<script>
import { updateHomeDescription, getHomeDescription, uploadImage } from '@/api/setting'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
//引入插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/paste'

    export default {
        name: "update",
        inject: ['reload'],
        data () {
            const validateFunction = (rule, value, callback) => {
                if (value.length < 30) {
                  callback(new Error('首页描述不能少于30个字符'));
                } else {
                  callback();
                }
            }
            return {
                form : {
                    description : '',
                },
                loading: false,
                redirect: undefined,
                updateRule : {
                  'description' : [{required: true,trigger: 'blur',validator: validateFunction }]
                },
                init: {
                    language_url: '/tinymce/zh_CN.js',
                    language: 'zh_CN',
                    skin_url: '/tinymce/skins/ui/oxide',
                    height:600,
                    plugins: 'link lists image code table wordcount  paste',
                    toolbar:
                        'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat paste',
                    //图片上传方法
                    images_upload_handler : (blobInfo, success, failure) => {
                        let formData = new FormData();
                        formData.append('image',blobInfo.blob());
                        uploadImage(formData).then(response => {
                            success(response.data.img);
                        }).catch(err => {
                            failure('error');
                        })
                    },
                    paste_data_images: true, //设置为允许粘贴图片
                }
            };
        },
        methods: {
          update() {
              this.$refs.form.validate(valid => {
                if (valid) {
                  this.loading = true;
                  updateHomeDescription({home_info: this.form.description}).then(response => {
                      this.$message({
                          type: 'success',
                          message: response.msg
                      });
                      this.loading = false;
                      this.reload();
                  })
                  .catch (() => {
                      this.loading = false;
                  })
                } {
                  return false;
                }
              });
          }
        },
        mounted : function () {
            getHomeDescription().then(response => {
                this.form.description = response.data.homeInfo;
            })
            .catch (() => {

            })

            tinymce.init({});
        },
        components: {Editor}
    }
</script>

<style lang="scss" scoped>
  .index_update_container {
    min-height: 100%;
    width: 100%;
    overflow: hidden;

    .el-form {
      position: relative;
      width: 1000px;
      max-width: 100%;
      margin: 0 auto;
      overflow: hidden;

      .button-container {
        width:30%;
        margin: 10px auto;

        .el-button {
          width:100%;
        }
      }
      .tips {
        font-size: 14px;
        color: #fff;
        margin-bottom: 10px;

        span {
          &:first-of-type {
            margin-right: 16px;
          }
        }
      }
    }
    .index_update_title_container {
      margin: 0px auto;
      h3 {
        text-align: center;
        font-size: 20px;
      }
    }
  }
</style>
